<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>运动应用-多物体运动</title>
	<style type="text/css">
		div{
			width: 100px;
			height: 100px;
			background-color: red;
			margin: 10px;
			float: left;
		}
	</style>
	<script type="text/javascript">
		window.onload=function(){

            var aDiv = document.getElementsByTagName('div');
			for (var i = 0; i <aDiv.length ; i++) {
				  
                  aDiv[i].onmouseover=function(){
                       startMove(this,400);
                  };

                  aDiv[i].onmouseout=function(){
                       startMove(this,100);
                  };


			};

		};



		var timer = null;
        //iTarget(目标点)
        //obj指定多物体中的其中一个动起来
		function startMove(obj,iTarget){

            clearInterval(timer);
            
            timer=setInterval(function(){
            var speed=(iTarget-obj.offsetWidth)/6;
            speed=speed>0?Math.ceil(speed):Math.floor(speed);

            if (obj.offsetWidth == iTarget) {
            	clearInterval(timer);
            }else{
            	obj.style.width=obj.offsetWidth+speed+'px';
            }


            },30)
		}


	</script>
</head>
<body>
	<div></div>
	<div></div>
	<div></div>
	<div></div>
</body>
</html>